import G6 from '@antv/g6';

G6.registerNode('diamond', {
    draw(cfg, group) {
        // 如果 cfg 中定义了 style 需要同这里的属性进行融合


        const keyShape = group.addShape('path', {
            attrs: {
                path: this.getPath(cfg), // 根据配置获取路径
                stroke: cfg.color, // 颜色应用到描边上，如果应用到填充，则使用 fill: cfg.color
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'path-shape',
            // 设置 draggable 以允许响应鼠标的图拽事件
            draggable: true,
        });
        if (cfg.label) {
            // 如果有文本
            // 如果需要复杂的文本配置项，可以通过 labeCfg 传入
            // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
            // style.text = cfg.label;
            const label = group.addShape('text', {
                // attrs: style
                attrs: {
                    x: 0, // 居中
                    y: 0,
                    textAlign: 'center',
                    textBaseline: 'middle',
                    text: cfg.label,
                    fill: '#666',
                },
                // must be assigned in G6 3.3 and later versions. it can be any value you want
                name: 'text-shape',
                // 设置 draggable 以允许响应鼠标的图拽事件
                draggable: true,
            });
        }

        return keyShape;
    },
    // 返回菱形的路径

    getPath(cfg) {
        const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
        console.log('here')
        const width = size[0];
        const height = size[1];
        //  / 1 \
        // 4     2
        //  \ 3 /
        const path = [
            ['M', 0, 0 - height / 2], // 上部顶点
            ['L', width / 2, 0], // 右侧顶点
            ['L', 0, height / 2], // 下部顶点
            ['L', -width / 2, 0], // 左侧顶点
            ['Z'], // 封闭
        ];
        return path;
    },

    update(cfg, node) {
        const group = node.getContainer(); // 获取容器
        const shape = group.get('children')[0]; // 按照添加的顺序
        const style = {
            path: this.getPath(cfg),
            stroke: cfg.color,
        };
        shape.attr(style); // 更新属性
        // 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题
        // 通过 label.attr() 更新文本属性即可
    },

});